<template>
    <div>
        <el-card class="box-card">
            <h1 style="text-align: center">请登录</h1>
            <el-form :model="form" ref="form" label-width="80px" @submit.native.prevent="submit('form')">
                <el-form-item
                    label="用户名"
                    prop="username"
                    :rules="[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 20, message: '用户名长度为 5 到 20 个字符', trigger: 'blur' }
                    ]"
                >
                    <el-input v-model.trim="form.username" autofocus clearable></el-input>
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                    :rules="[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 20, message: '密码长度为 5 到 20 个字符', trigger: 'blur' }
                    ]"
                >
                    <el-input v-model.trim="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item
                    label="验证码"
                    prop="captcha"
                    :rules="[
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]"
                >
                    <el-row>
                        <el-col :span="17">
                            <el-input v-model.trim="form.captcha"></el-input>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <div v-html="captchaData" @click="flushCaptcha"></div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item prop="password">
                    <el-button type="primary" native-type="submit" :loading="loading">登陆</el-button>
                    <el-button @click="reset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer'

export default {
    components: {
        Footer
    },
    data () {
        return {
            loading: false,
            form: {
                username: '',
                password: '',
                captcha: ''
            },
            captchaData: null
        }
    },
    methods: {
        submit (formName) {
            this.$refs[formName].validate(async valid => {
                if (!valid) return false
                this.loading = true
                const res = await this.$http.post('login', this.form)
                if (res && res.code === 0) {
                    this.$store.dispatch({
                        type: 'login',
                        store: res.returnObject.store,
                        name: res.returnObject.name,
                        role: res.returnObject.role
                    }).then(() => {
                        this.$router.push({ name: 'home' })
                    })
                }
                this.loading = false
            });
        },
        reset (formName) {
            this.$refs[formName].resetFields();
        },
        async flushCaptcha () {
            const res = await this.$http.get('/captcha')
            if (res && res.code === 0) {
                this.captchaData = res.returnObject
            }
        }
    },
    created () {
        this.flushCaptcha()
    }
}
</script>

<style scoped>
.box-card {
    width: 35rem;
    margin: 5rem auto;
}
</style>
